<template>
	<view class="page">
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content">{{titleName}}</block>
		</fu-custom>

		<view class="warp">
			<!-- 消息内容循环 start -->
			<view class="list" v-for="(item, index) in listData" :key="index">
				<!-- 	<view class="text-center margin-top">
				<text class="text-999 text-sm">{{ item.create_time || item.add_time }}</text>
			</view> -->
				<!-- 平台消息 -->
				<view class="consult" @tap.stop="lookInfo(item)">
					<view class="image" v-if="item.thumb">
						<fu-image :src="item.thumb"></fu-image>
					</view>
					<view class="desc">
						<view class="text-bold text-lg text-333">{{ item.title || "暂无标题" }}</view>
						<view class=" text-cut-2 text-df text-666 margin-top-sm">
							{{item.content || '无具体内容'}}
						</view>
						<view class=" margin-top-sm">
							<text class="text-999 text-sm">{{ item.create_time || item.add_time }}</text>
						</view>
					</view>
				</view>

			</view>
			<!-- 消息内容循环 end -->
			<!-- 分页组件 start-->
			<fu-empty :paging-list-loaded-all="pagingListLoadedAll" :paging-list-no-list-data="pagingListNoListData"
				:list-data-length="listDataLength" :isLoadInit='isLoadInit'></fu-empty>
			<!-- 分页组件 end-->
			<!-- 网络监测 start -->
			<fu-notwork></fu-notwork>
			<!-- 网络监测  end-->
		</view>
	</view>
</template>
<script>
	// import { checkImgExists  } from '@/commmon/utils/utils';
	import pagingList from '@/common/mixin/paging_list.js' //混合开发 请求数据
	export default {

		mixins: [pagingList],
		data() {
			return {
				titleName: '消息通知',
				minixPagingListsApi: global.apiUrls.getPlatMsgList, //列表请求地址
				allowOnloadGetList: true, //是否允许请求
				pageingListApiMethod: "post", //请求方式
				msg_type: 0 //消息类型
			};
		},
		/**
		 * @description 页面初始化
		 * @param {Object} e  msg_type:消息类型id,  name:消息类型名称
		 *
		 */
		onLoad(e) {
			this.setSysTitle(e); //设置系统导航名称
			this.msg_type = e.id || 0;
			// 其他通知 无详情 调用系统消息接口
			this.pageingListApiMethod = "post"
			// this.minixPagingListsApi = global.apiUrls.getPlatMsgList;
			this.allowOnloadGetList = true;
			this.pagingListGetLists(); //获取数据 调用混用开发里面的方法
		},
		onPullDownRefresh() {
			this.pagingListToggle()

		},
		methods: {
			/**
			 *@description 查看详情
			 */
			lookInfo(item) {
				uni.navigateTo({
					url: '/pages/service-message/message/message-detail/index?id=' + item.id
				})
			},
			/**
			 * @description 删除消息
			 * @param {Object} item  id:消息id唯一标识
			 */
			delMessage(item) {
				this.$util.showModal({
					title: this.i18n['提示'],
					content: this.i18n['确定删除此消息？'],
					success: (data) => {
						if (data.confirm) {
							this.$api.post(global.apiUrls.postOperationDelSystemMsg, {
								id: item.id,
								msg_type: this.msg_type
							}).then(res => {
								if (res.data.code == 1) {
									this.pagingListToggle(); //刷新列表
								} else {
									this.$message.info(res.msg)
								}
							})
						} else if (data.cancel) {
							// console.log('用户点击取消');
						}
					}
				})
			},
			/**
			 * 设置系统导航名称
			 * @param {Object} e name: 消息类型
			 */
			setSysTitle(e) {
				this.titleName = e.name
				// uni.setNavigationBarTitle({
				// 	title: e.name || this.i18n['系统通知']
				// });
			},

			/**
			 * 请求分页接口时加入额外参数
			 */
			pagingListPostData() {
				return {
					msgtype: this.msg_type,
					page_size: 10
				}
			},
		},
	};
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		font-size: 28upx;
		background: #f9f9f9;

		.warp {
			padding: 0 32rpx 32rpx;

			// 消息列表循环 start
			.list {
				.times {
					text-align: center;
					margin-top: 32rpx;

					.text {
						width: 216rpx;
						height: 33rpx;
						font-size: 24rpx;
						line-height: 29rpx;
						color: #999999;
						opacity: 1;
					}
				}

				.consult {
					margin: 25upx 0;
					width: 100%;
					border-radius: 16rpx;
					background: #fff;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					color: #999;

					.image {
						height: 320rpx;
						width: 100%;
						border-radius: 16rpx 16rpx 0 0;
						padding-bottom: 20rpx;
						overflow: hidden;
					}

					.desc {
						padding: 24rpx;

						.title {
							/* height: 45rpx; */
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 36rpx;
							color: #333333;
						}

						.content {
							// height: 40rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 44rpx;
							color: #666666;
							opacity: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}

				}
			}

			// 消息列表循环 end
		}
	}
</style>
